<template>
  <el-container>
    <el-header>
      <div style="margin-top: 20px;">
        <el-page-header @back="back">
          <template slot="title">返回列表</template>
          <template slot="content">
            <el-button type="success" icon="el-icon-check" v-on:click="save(false)">保存</el-button>
            <el-button type="success" icon="el-icon-finished" v-on:click="save(true)">提交</el-button>
            <el-button type="warning" icon="el-icon-news" @click="showTemplateTest=true">测试</el-button>
            <el-button type="primary" icon="el-icon-s-flag" v-on:click="showVersion = true">版本</el-button>
            <el-button type="primary" icon="el-icon-more" @click="showProperty=true"></el-button>
          </template>
        </el-page-header>
      </div>
      <el-drawer :visible.sync="showProperty" direction="rtl" size="30%" >
        <div slot="title">
          <h3 style="margin:0">{{ model.name }}</h3>
        </div>
        <el-container>
          <el-main>
            <el-form>
              <el-form-item label="显示名">
                <el-input v-model="model.content.displayName"></el-input>
              </el-form-item>
              <el-form-item label="描述(可选)">
                  <el-input v-model="model.content.description" type="textarea" :rows="8" ></el-input>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
      </el-drawer>
      <el-drawer :title="'[' + model.name + ']所有版本'" :visible.sync="showVersion" @closed="versionClosed" direction="rtl" size="40%" >
        <mf-versioning :repo="repo" :workItem="model" comparable @compare="compareVersion" ></mf-versioning>
      </el-drawer>
      <el-dialog title="模板测试" :visible.sync="showTemplateTest"  width="90%" center @closed="reset" :modal="false" :close-on-click-modal="false">
        <el-container>
          <el-header>
            <el-steps :active="active" finish-status="success">
              <el-step title="填写对象模型(json格式)" icon="el-icon-edit">
              </el-step>
              <el-step title="模板替换结果" icon="el-icon-upload">
              </el-step>
            </el-steps>
          </el-header>
          <el-main style="height:500px">
            <template v-if="active == 1">
              <mf-monacoEditor ref="result" v-model="templateTestResult" language="razor" theme="vs-dark" ></mf-monacoEditor>
            </template>
            <template v-else>
              <mf-monacoEditor ref="tester" v-model="testData" language="json" theme="vs-dark" ></mf-monacoEditor>
            </template>
          </el-main>
        </el-container>
        <div slot="footer">
          <el-button v-if="active == 1" @click="reset">重试</el-button>
          <el-button v-else @click="commitTest">提交</el-button>
        </div>
      </el-dialog>
    </el-header>
    <el-main>
      <mf-monacoEditor ref="editor" v-model="model.content.text" language="razor" theme="vs-dark" ></mf-monacoEditor>
    </el-main>
  </el-container>
</template>
<script>
import {mapActions} from 'vuex';
const STORE_MODULE = {
  "name": "template",
  "actions": [
    "item",
    "create",
    "update"
  ]
};
export default {
  data() {
    return {
      repo: "dispatcher",
      active: 0,
      newItem: false,
      showVersion: false,
      showProperty: false,
      showTemplateTest: false,
      model: {
        name: "",
        content: {
          name: "",
          displayName: "",
          text: "",
          description: "",
        },
        submitted:false,
      },
      testData: "",
      templateTestResult: ""
    };
  },
  computed: {
  },
  created() {
    this.loadObject();
  },
  mounted() {
  },
  methods: {
    ...mapActions(STORE_MODULE.name, STORE_MODULE.actions),
    back() {
      this.$router.push({ name: "template" });
    },
    loadObject() {
      let name = this.$route.params.name;
      this.model.name = name;
      this.model.content.name = name;
      this.item(name).then(response => {
        if (response.success){
          if (response.data) {
            this.model = response.data;
          }
          else{
            this.newItem = true;
          }
        }
      });
    },
    save(commit) {
      let task = this.newItem ? this.create : this.update;
      task(this.model).then(response => {
        if (response.success) {
          this.newItem = false;
          this.model = response.data;
          if (commit) {
            prompt("请填写备注", "提交", "", val => {
              this.$service.version
                .commit({ routeData: {repo: this.repo}, data: { name: this.model.name, comment: val } })
                .then(response => {
                  if (response.success) {
                    alert("提交成功", "消息", "success", this.back);
                  }
                });
            });
          } else {
            alert("保存成功", "消息", "success");
          }
        } else {
          if (response.message) alert(response.message, "错误", "error");
        }
      });
    },
    versionClosed() {
      this.showVersion = false;
    },
    compareVersion(arg) {
      arg.callback(this.model.content);
    },
    commitTest() {
      let data = {
        model: JSON.parse(this.testData || '{}'),
        templateContent: this.model.content.text
      };
      this.$service.templateEngine.test({data}).then(r=>{
        this.templateTestResult = r.data;
        this.active = 1;
      });
    },
    reset() {
      this.active = 0;
      //this.testData = "";
      this.templateTestResult = "";
    }
  },
};
</script>
